<script setup>

import {nextTick, onMounted, ref} from "vue";

const dingtalkRef = ref();
const env = import.meta.env
const loading = defineModel();
const handleMessage = (event) => {
  if (event.origin === "https://login.dingtalk.com") { //判断是否来自ddLogin扫码事件。
    loading.value = true
    location.href = 'https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=AppKey&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=REDIRECT_URI&loginTmpCode=' + event.data
  }
};
const dingInit = () => {
  let url = encodeURIComponent((env.VITE_APP_OPEN_PROXY === 'true' ? env.VITE_APP_PROXY_PREFIX : env.VITE_APP_BASE_URL) + '/system/dingLogin?loginType=dingtalk&path=' + encodeURIComponent(location.href));
  let key = 'dingskwcwjs6ng2isfyx';
  DDLogin({
    id: "dingtalk",
    goto: encodeURIComponent("https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=" + key + "&response_type=code&scope=snsapi_login&state=&redirect_uri=" + url), //请参考注释里的方式
    style: "border:none;background-color:#FFFFFF;",
    width: "400",
    height: "300"
  });
  loading.value = false
}
onMounted(()=>{
  import('https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js').then(()=>{
    nextTick(() => dingInit())
  })
})
if (typeof window.addEventListener != 'undefined') {
  window.addEventListener('message', handleMessage, false);
} else if (typeof window.attachEvent != 'undefined') {
  window.attachEvent('onmessage', handleMessage);
}
</script>

<template>
  <a-spin :loading="loading" style="width: 400px;height: 300px;" class="text-center flex justify-center items-center">
    <div id="dingtalk" ref="dingtalkRef"></div>
  </a-spin>
</template>

<style scoped>

</style>